<template>
    <div style="background-color:#f4f2f2;margin-top: 10px;padding-top: 5px;padding-bottom: 5px;">
        <label style="padding-left: 5px;padding-right: 10PX;">提示：这里只作用于赋值给流程数据-临时变量，可以将事件上下文信息赋值给临时变量</label>
        <a-button tertiary style="text-align: right;" type="info" @click="addDataRow(dataSource)">
            添加变量
        </a-button>          
    </div>
    <a-table :columns="createColumns" :data-source="dataSource">
        <template #bodyCell="{ column, record, text, index }">
         <template v-if="column.key === 'variable'">
            <div style="display: flex; gap: 8px;">
                <a-select
                  v-model:value="record.variable"
                  style="width: 100%"
                  placeholder=""
                >
                <a-select-option  
                        v-for="opt in temporaryVariable"  
                        :key="opt.code"  
                        :value="opt.code"  
                    >  
                        {{ opt.name }}  
                    </a-select-option> 
              </a-select>
              </div>
            </template>
            <template v-if="column.key === 'variableValue'">
              <div  style="border: 1px solid #e6e8eb;display: flex;justify-content: space-between;align-items: center;">
                <div style="overflow: auto;" class="tagboxs">
                  <a-tag>
                    传值设置
                  </a-tag>
                </div>
              <a-button style="margin-left: auto;" size="small" secondary type="info" @click="openModal(record)">
                <template #icon>
                  <a-icon><ControlOutlined /></a-icon>
                </template>设置
              </a-button>      
            </div>
              <!-- <div style="display: flex; gap: 8px;">
                <a-input readonly v-model:value="record.variableValue" @click="openModal(record)">
                  <template #suffix>
                    <a-tooltip>
                      <ControlOutlined />
                    </a-tooltip>
                  </template>
                </a-input>
              </div> -->
            </template>
        </template>
    </a-table>
</template>
<script lang="tsx" setup>
import { reactive, ref, h, watch, unref, onMounted } from 'vue';
import { ControlOutlined } from '@ant-design/icons-vue';
import type { TableColumn } from '@/components/core/dynamic-table';
import { Tree, TreeProps, Input, Button, Popconfirm, Modal, Alert, SelectProps, Cascader, Select } from 'ant-design-vue';
import {processInfo} from '@/store/modules/processInfo';
import { useModal } from '@/hooks/useModal/useModal';
import VariableValueSetting from '@/components/design/components//Panel/components/SubChild/VariableValueSetting.vue';

const temporaryVariable=ref([]);
const dataSource = ref([]);
const processInfoStore = processInfo();
const loadData=()=>{
    temporaryVariable.value=processInfoStore.procVariable[1];
  }
  loadData();
  function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
    /[xy]/g,
    function (c) {
      var r = (Math.random() * 16) | 0,
        v = c == 'x' ? r : (r & 0x3) | 0x8;
      return v.toString(16);
    }
  );
}
interface Props {
        defaultData?: any;
    }
const props = withDefaults(defineProps<Props>(), {
        defaultData: {}
  });
const [ModalRender, modalRef] = useModal();
const editDrawerBindValue = reactive({
        defaultSelectData: []
      });
const openModal = async (record) => {
  editDrawerBindValue.defaultSelectData = [];
  ModalRender.show({
    title: `传值设置`,
    width: '50%',
    destroyOnClose: true,
    content: () => {
      return <VariableValueSetting  ref={modalRef} defaultData={unref(editDrawerBindValue)}></VariableValueSetting>;
    },
    // 确定方法执行
    onOk: async (values) => {
      //调用子页面的方法
      const res = await modalRef.value?.handleSubmit();
      console.log(res.value,"111111111111100000000000")
      record.variableValue=res.value;
      console.log(record,"1111111111111111111")
      console.log(dataSource,"22222222222222222")
      //if (!res) return;

    },
  });
};
const createColumns: TableColumn<any> = [
  {
    title: '变量名称',
    key: 'variable',
  },
  {
    title: '变量赋值',
    key: 'variableValue',
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    width: '20%',
    customRender: ({ text, record, index }) => {
      return <Popconfirm title='确认删除吗？' onConfirm={(e) => removeRow(dataSource, record.variable)}><a>删除</a></Popconfirm>
    }
  },
];
//新增行 
const addDataRow = (operData) => {
  const newRow = {
    key: uuidv4(),
    variable: undefined,
    variableValue:undefined
  };
 operData.push(newRow);
}
//删除行
const removeRow = (operData, key) => {
   operData.value = operData.value.filter((item) => item.variable !== key);

};
const onSubMit = async () => {
    return dataSource;
}
//上级父页面调用
defineExpose({
  handleSubmit: onSubMit,
});
</script>